<template>
  <div id="dynamic-content-to-pdf">
    <h1>动态数据导出为PDF</h1>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="generatePDF">导出为PDF</button>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  props: {
    headers: Array,
    items: Array
  },
  methods: {
    async generatePDF() {
      const element = document.getElementById('dynamic-content-to-pdf');
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0);
      pdf.save('dynamic-data.pdf');
    }
  }

}
</script>
<style lang="">

</style>